<template>
	<div id="music">
		<!-- <el-autocomplete
			v-model="state4"
			:fetch-suggestions="querySearchAsync"
			placeholder="请输入内容"
			@select="handleSelect">
		</el-autocomplete> -->

		<el-tabs>
		    <el-tab-pane label="热搜榜音乐">
		    	 <MusicHot></MusicHot>
		    </el-tab-pane>

		    <el-tab-pane label="歌单">
		    	<gedan></gedan>
		    </el-tab-pane>
		    <el-tab-pane label="歌手列表">热门歌手</el-tab-pane>
		    <el-tab-pane label="推荐专辑">电台</el-tab-pane>
		</el-tabs>
		<!-- <CurrentMusic :percent="curpercent"></CurrentMusic> -->
		<!-- <audio ref="audio" id="audio" @timeupdate="updateTime" @ended = "ended" controls="controls" autoplay hidden>
		</audio> -->
	</div>
</template>

<script type="text/javascript">
    import MusicHot from "./MusicHot.vue"
    import Gedan from "./Gedan.vue"
	export default{
		data(){
			return{
				// curPlayList:[],
				// curPlaySong:'',
			}
		},
		components:{
			// CurrentMusic,
			MusicHot,
			Gedan
		},
		computed:{
			// Songduration(){
			// 	return this.$store.state.Songduration;
			// }
		},
		methods:{
			
		}
	};
</script>

<style type="text/css" scoped lang="scss">
	p{
		margin-bottom: 0;
		font-size: 12px;
		color: green;
		display: inline-block;   
		white-space: nowrap;
		width: 180px;
		overflow: hidden;   
		text-overflow:ellipsis;
	}
	button{
		outline: none;
		&:focus{
			border-color:#c6e2ff;
		}
	}
	.el-row .el-col:nth-child(16) .el-card .el-card__body img{
		padding-bottom: 1px;
	}
	p.listtit{
		color: #454545;
		width: 180px;
		margin-top: 6px;
		font-size: 13px;
	}
	.overly{
		position: relative;
	}
	.fix{
		position: absolute;
		bottom: 0;
		width:100%;
		background: rgba(0,0,0,.5);
		color: #ddd;
		padding:3px 1px;
		span{
			font-size: 13px;
		}
	}
	i.songSheet{
		cursor: pointer;
		padding:3px;
	}
	i.songSheet:hover{
		color: #fff;

	}
	
</style>